<template>
  <div
    class="echart"
    id="Industry-distribution"
    :style="{ float: 'left', width: '100%', height: '2.7rem' }"
  ></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {};
  },
  props: {
    unitNumber: {
      type: Number,
      default: 500,
    },
  },
  mounted() {
    this.initEcharts();
  },
  watch: {
    unitNumber() {
      this.initEcharts();
    },
  },
  methods: {
    initEcharts(seriesData) {
      const option = {
        grid: {
          top: "10%",
          left: "6%",
          right: "0%",
          bottom: "10%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: function(val) {
            let tips = `${val[0].name}`;
            val.forEach((item) => {
              if (item.seriesName) {
                tips =
                  tips +
                  `<div style="color:#fff;font-size:12px;line-height: 20px;padding:5px 0;">${item.value}个</div>`;
              }
            });
            return tips;
          },
        },
        dataZoom: [
          {
            show: false,
            type: "slider",
            handleSize: "none", // 两边的按钮大小
            startValue: 0, // 重点在这   -- 开始的值
            endValue: 5, // 重点在这   -- 结束的值
          },
          {
            zoomLock: true, // 这个开启之后只能通过鼠标左右拉动，不能滚动显示
            type: "inside",
          },
        ],
        legend: {
          itemGap: 10,
          itemHeight: 4,
          textStyle: {
            color: "rgba(255, 255, 255,0.7)",
            fontSize: 14,
          },
          right: "center", //组件离容器左侧的距离，可以是left,center,right，也可以是像素px和百分比10%
          bottom: "15%",
        },
        xAxis: {
          data: seriesData.xAxis,
          axisLine: {
            lineStyle: {
              color: "transparent", //底部边框颜色
            },
          },
          triggerEvent: true,
          axisLabel: {
            textStyle: {
              color: "#a6a8b5", //底部文字颜色
              fontSize: 12,
            },
            interval: 0,
            rotate: 50,
            formatter: function(val) {
              let str = "";
              str = val.length >= 8 ? val.substring(0, 7) + "..." : val;
              return "{name|" + str + "}";
            },
            rich: {
              name: {
                with: 20,
              },
            },
          },
        },
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "transparent", //左边框颜色
              },
            },
            axisLabel: {
              show: true,
              fontSize: 12,
              textStyle: {
                color: "#a6a8b5", //左文字颜色
              },
            },
          },
        ],
        series: [
          {
            type: "bar",
            barWidth: 24,
            showBackground: false,
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgb(10,239,255,.8)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgb(12,160,254,.8)", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            data: seriesData.yAxis || [
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
            ],
            z: 0,
            zlevel: 0,
          },
          {
            name: "",
            type: "pictorialBar",
            barWidth: 24,
            itemStyle: {
              normal: {
                color: "rgba(0,63,119,.8)", //数据的间隔颜色
              },
            },
            symbolRepeat: "fixed",
            symbolMargin: 1,
            symbol: "rect",
            symbolSize: [24, 3],
            symbolPosition: "end",
            symbolOffset: [0, 0],
            data: [
              20,
              80,
              90,
              40,
              34,
              64,
              12,
              52,
              16,
              34,
              85,
              62,
              20,
              80,
              90,
              40,
              34,
              64,
              12,
              52,
              16,
              34,
              85,
              62,
              85,
              62,
              1,
            ],
            z: 1,
            zlevel: 0,
          },
        ],
      };
      const myChart = echarts.init(
        document.getElementById("Industry-distribution")
      ); // 图标初始化
      myChart.setOption(option); // 渲染页面
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
      this.extension(myChart);
    },
    getData(areaId) {
      this.$get("/business/business/getBusinessTypeCountList").then(
        (res) => {
          let seriesData = {
            xAxis: res.data.map((item) => item.unitCategoryName),
            yAxis: res.data.map((item) => item.count),
          };
          this.initEcharts(seriesData);
        },
        (err) => {
          this.$message.error(err.msg || "系统错误");
        }
      );
    },
    extension(chart) {
      var elementDiv = document.getElementById("extension");
      if (!elementDiv) {
        var div = document.createElement("div");
        div.setAttribute("id", "extension");
        div.style.display = "block";
        document.querySelector("html").appendChild(div);
      }
      chart.on("mouseover", function(params) {
        if (params.componentType == "xAxis") {
          var elementDiv = document.querySelector("#extension");
          //设置悬浮文本的位置以及样式
          var elementStyle =
            "position: absolute;z-index: 99999;color: #fff;font-size: 12px;padding: 5px;display: inline;border-radius: 4px;background-color: #303133;box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 8px";
          elementDiv.style.cssText = elementStyle;
          elementDiv.innerHTML = params.value;
          document.querySelector("html").onmousemove = function(event) {
            var elementDiv = document.querySelector("#extension");
            var xx = event.pageX - 10;
            var yy = event.pageY + 15;
            elementDiv.style.top = yy + "px";
            elementDiv.style.left = xx + "px";
          };
        }
      });
      chart.on("mouseout", function(params) {
        //注意这里，我是以X轴显示内容过长为例，如果是y轴的话，需要改为yAxis
        if (params.componentType == "xAxis") {
          var elementDiv = document.querySelector("#extension");
          elementDiv.style.cssText = "display:none";
        }
      });
    },
  },
};
</script>
<style lang="less">
canvas {
  height: 2.7rem;
  width: 100%;
  position: relative;
}
</style>
